import { AtDivider } from 'taro-ui';
import { useState } from 'react';
import { useLoad } from '@tarojs/taro';
import HotItem from '@/components/HotItem/index';
import './index.scss';

export default function Hot() {
    useLoad(() => {
        console.log('Page loaded.');
    });
    const [hotList, setHotList] = useState([
        {
            id: 1,
            img: '@/assets/assets/hot/hotFirst',
        },
        {
            id: 2,
            img: '@/assets/assets/hot/hotFirst',
        },
    ]);

    return (
        <div className='hot-list'>
            <div className='hot-item'>
                <div className='left'>
                    <div className='hot-icon'>
                        <img src={require('../../../src/assets/hot/hotFirst.png')} alt='' className='img-icon' />
                    </div>
                    <div className='hot-img'>
                        <img src={require('../../../src/assets/hot/1.png')} alt='' className='img-hot' />
                    </div>
                </div>

                <div className='right'>
                    <div className='hot-title'>【仅限深圳同城地区】新鲜水果上市 大荔冬枣 5斤...</div>
                    <div className='hot-price'>
                        <span>¥</span>79.99
                    </div>
                    <div className='buy-btn'>
                        <button className='btn'>
                            <span>去购买</span>
                        </button>
                    </div>
                </div>
            </div>
            <div className='hot-item'>
                <div className='left'>
                    <div className='hot-icon'>
                        <img src={require('../../../src/assets/hot/hotSecond.png')} alt='' className='img-icon' />
                    </div>
                    <div className='hot-img'>
                        <img src={require('../../../src/assets/hot/2.png')} alt='' className='img-hot' />
                    </div>
                </div>

                <div className='right'>
                    <div className='hot-title'>【仅限深圳同城地区】新鲜水果上市 大荔冬枣 5斤...</div>
                    <div className='hot-price'>
                        <span>¥</span>79.99
                    </div>
                    <div className='buy-btn'>
                        <button className='btn'>
                            <span>去购买</span>
                        </button>
                    </div>
                </div>
            </div>
            <div className='hot-item'>
                <div className='left'>
                    <div className='hot-icon'>
                        <img src={require('../../../src/assets/hot/hotThird.png')} alt='' className='img-icon' />
                    </div>
                    <div className='hot-img'>
                        <img src={require('../../../src/assets/hot/1.png')} alt='' className='img-hot' />
                    </div>
                </div>

                <div className='right'>
                    <div className='hot-title'>【仅限深圳同城地区】新鲜水果上市 大荔冬枣 5斤...</div>
                    <div className='hot-price'>
                        <span>¥</span>79.99
                    </div>
                    <div className='buy-btn'>
                        <button className='btn'>
                            <span>去购买</span>
                        </button>
                    </div>
                </div>
            </div>
            <HotItem />
            <div className='remain'>
                <AtDivider
                    content='亲，我也是有底线的'
                    fontColor='#888888'
                    lineColor='#888888'
                    className='divider'
                    fontSize='24'
                />
            </div>
        </div>
    );
}
